﻿<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>酷狗音乐</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
        <script src="js/1.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script> 
<style>
/* 头部样式开始*/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#0894ec;
    padding: .1rem .4rem;
    position: fixed;
    top:0px;
    z-index:2;
    width: 100%;
}
header .header_left{
    flex:6;
      display: flex;
      align-items: center;
    }
    header .header_left .logo{
        width:1rem;
      height: 1rem;  
    }
    header .header_left .dongganyinyue{
    padding-left:.2rem;
    color: white;
    font-size: .6rem;
    }
    header .header_right{
        flex:1;
    /* border:1px solid red; */
    }
    header .header_right .sousuo{
        width:.7rem;
      /* height: .7rem; */
    }
    header .header_right img,header .header_left .logo img{
      width:100%;

    }
/* 头部样式结束 */

/* tab切换样式开始 */
    .tab-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom:1px solid #eeeeee;
        box-shadow: 1px 1px 1px #eeeeee;
        /* padding: .2rem 0; */
        position: fixed;
        top:1.2rem;
        z-index:2;
        width: 100%;
        background: white;
    }
.tab-head a{
   flex:1;
    display:flex;
    /* border:1px solid red; */
   align-items: center;
   padding:.3rem .3rem;

}
.tab-head p{
   flex:3;
   /* border:1px solid red; */
   font-size: .5rem;
   padding:.2rem 0;
   margin-left:20%;
}
/* 音乐详情库样式开始 */
.search{
  margin-top:24%;  
  display: flex;
  justify-content: space-around;
  padding:.2rem .2rem;
  align-items: center;
  background:#f6f6f6;
}
.search .sea_left{
    display: flex;
    align-items: center;
    flex:4;
    font-size:.4rem;
    /* border:1px solid red; */
}
.search .sea_left input{
    border:1px solid #e5e5e5;
    height:1rem;
    line-height: 1rem;
    width:100%;
    padding-left:10%;
    font-size:.4rem;
    background:#ffffff url(image/search2.png) no-repeat 2% center;
}
.search .sea_right{
    margin-left:.2rem;
    display: flex;
    align-items: center;
    flex:1;
    /* border:1px solid red; */
}
.search .sea_right input{
    border:none;
    border-radius: .2rem;
    height:.8rem;
    width:1.8rem;
    height:1rem;
    line-height: 1rem;
    background: #0894ec;
    color:white;
    font-size:.4rem;
}
/* js穿件的样式开始 */

.music{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 0.2rem 0.2rem;
    border-bottom:1px solid #e5e5e5;
}
.music .filename{
    font-size:.4rem;
    flex:5;
    /* border:1px solid red; */
}
.music .download{
    flex:1;
    height:1rem;
    width: 1rem;
    display: flex;
    align-items:center;
    justify-content: center;
    /* border:1px solid red; */
}
.music .download .tupian{
    width:30%;
}
/* js创建样式结束 */


/* 音乐详情库样式结束 */
/* 底部开始 */
footer{
    position: fixed;
    bottom: 0px;
    z-index:5;
    background: rgba(0, 0, 0, .8);
    display: flex;
    width:100%;
    justify-content: space-between;
    padding: .2rem .1rem;
    height: 1.5rem;
  }
  footer  .bot_left{
    flex:2;
    display: flex;  
    align-items: center;
    justify-content: flex-start;
    /* border:1px solid red; */
  }
  footer  .bot_left .zi{
    color:white;
    margin-left:.4rem;
  }
  footer  .bot_left .zi .geming{
    font-size: .4rem;   
    margin-bottom:6%;
  }
  footer  .bot_left .zi .zuozhe{
    font-size: .4rem;
    color: #888;
  }
  footer  .bot_left .renxiang{
    /* border:1px solid red; */
    width: 1.5rem; 
    height:1.5rem;
  }
  footer  .bot_left  img{
    height:100%;
    width:100%;
    border-radius: 50%;
  }
  footer  .bot_right{
    flex:1;
    display: flex;
    align-items: center;
    /* border:1px solid red; */
  }
  footer  .bot_right .bofang input{
      width: .8rem;
  }
  footer  .bot_right>div{
      width:1rem;
      height:1rem;
      /* border:1px solid red; */
      display: flex;
      align-items: center;
      justify-content:center;
  }
  footer  .bot_right img{
    width:80%;
  }
  #foot{
      display: none;
  }
  .zi p{
    width: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
  }
  .tab-head2 .bga p{
    width: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
  }
/* 底部结束 */

/* 弹框开始 */
.tankuang{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:fixed;
    top:0px;
    z-index:3;
    display: none;
  }
  .tishi{
    display:none;
    width:85%;
    border-radius:.5rem;
    margin:0px auto;
  }
  .tishi .dialog-inner{
    width:85%;
    border-top:.1rem solid #0894ec;
    border-radius:.3rem;
    position:fixed;
    z-index: 4;
    top:30%;
    background:white;
  }
  .dialog-bd{
    height:3rem;
    font-size: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom:1px solid #e5e5e5;
  }
  .dialog-ft{
    height:1.5rem;
    display:flex;
    justify-content:space-around;
    align-items: center;
  }
  .dialog-ft span,.dialog-ft a{
    display:inline-block;
    width:50%;
    text-align: center;
    border-radius: 0 0 0 .3rem;
    height:1.5rem;
    line-height:1.5rem;
    font-size: .5rem;
  }
  .dialog-ft a{
    border-left:1px solid #e5e5e5;
    border-radius: 0 0 .3rem 0;
  }
/* 弹框结束 */








#loading{
    height:1rem;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading img{
    width:10%;
}
/* 音乐播放开始 */
.yinyuejiemian{
    width: 100%;
    height: 93.6%;
    position: fixed;
    z-index: 5;
    /* display: none; */
    background: rgba(0,0,0,.8);
    top: 6.5%;
    display: none;

}
.zhezhao{
    width:100%;
    background:rgba(0, 0, 0, .8);
    height:93.5%;
    position:fixed;
    top:6.5%;
    z-index:5;
    /* display: none; */
}
.datu{
    width:100%;
   height:93.5%;
    position: fixed;
    /* top: 21%; */
    z-index:2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.datu img{
    filter:blur(10px);
    -webkit-filter:blur(10px);
    -moz-filter:blur(10px);
    -ms-filter:blur(10px);
    -o-filter:blur(10px);
    height: 100%;
}
.tab-head2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:1.2rem;
    z-index:5;
    width: 100%;
    color:#ffffff;
}
.tab-head2 a{
flex:1;
display:flex;
/* border:1px solid red; */
align-items: center;
padding:.3rem .3rem;

}
.tab-head2 .bga{
    /* border: 1px solid red; */
    font-size: .5rem;
    padding: .2rem 0;
    /* margin-left: 20%; */
    padding-right: .6rem;
    display: flex;
    justify-content: center;
    flex: 20;
}

.fenmian{
    position:fixed;
    z-index:5;
    display: flex;
    top:4rem;
    width:100%;
    height:2rem;
    justify-content:center;
    align-items: center;
    /* border:1px solid red; */
}
.fenmian img{
    width: 45%;
    border-radius: 50%;
}
.gecixianshi{
    position:fixed;
    z-index:5;
    top:7.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    width: 100%;
    /* border:1px solid red; */
}
.gecixianshi p:nth-of-type(1){
 color:white;
height:.9rem;
line-height: .9rem;
font-size: .45rem;
opacity:.8;
}
.gecixianshi p:nth-of-type(2){

color:yellow;
height:.9rem;
line-height: .9rem;
font-size: .5rem;
opacity:.9;
}
.qiehuan{
    /* border: 1px solid red; */
    width: 100%;
    display: flex;
    position:fixed;
    top:11rem;
    z-index:5;
    justify-content: center;
    align-items: center;
}
.qiehuan>div{
    height:1.3rem;
    width: 1.3rem;
    margin:0px .4rem;
}
.qiehuan>div:nth-of-type(2){
    height:1.6rem;
    width: 1.6rem;
}
.qiehuan img{
    width:100%;
}
.xiazaidonggan{
    display: flex;
    position: fixed;
    top:13.5rem;
z-index:5;
justify-content: center;
align-items: center;
width: 100%;
}
.lijixiazai{
    display: flex;
    justify-content: center;
align-items: center;
    color:white;
    background: #0894ec url(image/download_icon.png) no-repeat .9rem center;
    height:1.5rem;
box-sizing: border-box;
padding-left:.9rem;
    width:6rem;
    font-size:.55rem;
    border-radius: .3rem;
    background-size: 15%;
}
.time-wrap{
    position: fixed;
    top:10rem;
    z-index:5;
    display: flex;
    justify-content:space-around;
    width:100%;
}
.timeshow,.time{
    color:white;
}


/* 进度条 */
body,div{padding: 0;margin: 0;}
.m-main{
    position: fixed;
    top: 9.2rem;
    z-index:5;
    width:100%;
}
.m-main video{display: none; }
.m-main .player {
  width: 100%;
  height: 150px;
  position: relative;
  bottom: 0px;
}
.m-main .player>a{display: inline-block; width: 20%; margin: 0 auto; padding: 5%; color: #FFF; text-align: center;}
.m-main .play-box {
  width: 100%;
  margin: 0 auto;
}
 
.m-main .play-box .left {
  width: 100%;
  float: left;
}
 
.m-main .play-box .left p.timeline { width: 70%;height: 3px; background-color: rgba(216, 216, 216, 0.5); border-radius: 5px; margin:30px auto 0; position: relative; z-index: 2; }
.m-main .play-box .left p.timeline span {position: relative; width: 0px; height: 3px; background-color: #FFF; border-radius: 5px; display: block; -webkit-transition: width ease-out 0.3s;-o-transition: width ease-out 0.3s;transition: width ease-out 0.3s;}
/* .m-main .play-box .left p.timeline span:after{content: ""; position: absolute; top: -4px; right:-0.6rem;width: 1.2rem; height:1.2rem; border-radius: 50%;background-color: #FFF;} */
.m-main .play-box .left div.info { height: 26px; line-height: 26px;color: #000; position: relative; top: -18px; margin:0 10px; z-index: 1;color: #FFF;}
.m-main .play-box .left div.info .size { float: left; display: block;}
.m-main .play-box .left div.info .timeshow { float: right; display: block;}


/* 音乐播放结束 */

.imgurl{
    display: none;
}
#imgs{
    display:none;
}
</style>
</head>
<script src="js/search.js"></script>
    <!-- 头部开始 -->
<header>
    <div class="header_left">
        <div class="logo"><img src="image/音乐.png" /></div>
         <div class="dongganyinyue">动感音乐</div>
    </div>
    <div class="header_right">
        <div class="sousuo"><img src="image/search.png" /></div>
    </div>    
</header>
<!-- 头部结束 -->
<!-- 正文开始 -->
<div class="tab-head">
    <a href="javascript:history.go(-1)"><img src="image/return.png" /></a>
    <p id="bg1" class="active">新歌</p>

</div>
<div id="content">
    <div id="book1">
    <!-- 搜索框开始 -->
    <div class="search">
        <div class="sea_left">
            <input type="text" placeholder="请输入歌手名搜索" id="kw" value="">
        </div>
        <div class="sea_right">
            <div>
                <input type="button" value="搜索" id="searchbtn"/>
            </div>
        </div>
    </div>
         <!-- 此处显示音乐列表开始 -->
    <div id="musiclist"></div>
    <!-- 此处显示音乐列表开始 -->
    </div>
   
</div>
<!-- 正文结束 -->
<!-- 加载开始 -->
    <div id="loading" style="display:none;">
    <img src="image/3.gif" />
    </div>
<!--加载结束  -->
<footer id="foot">
    <div class="bot_left">
    <div class="renxiang"><img src="image/fenmian.jpg" id="mx"/></div>
    <div class="zi">
        <p class="geming" id="gg">一眼千年</p>
        <p class="zuozhe" id="zz">那英</p>
    </div>
    </div>
<div class="bot_right">
    <div class="bofang"><input type="image" src="image/1.png" id="cbtn"/></div>
    <div class="xiayige"><img src="image/next_icon.png"  id="nbtn"/></div>
    <div id="dbtn"><img src="image/download_icon.png"/></div>
</div>
</footer>
<!-- 底部结束 -->
<!-- 弹框开始 -->
<div class="tankuang" id="cover"></div>
<!-- <div class="datu" id="imgs"><img src=""></div> -->
<div class="tishi" id="tishi">
    <div class="dialog-inner">
        <div class="dialog-bd">
          <p>下载需要手机酷狗客户端支持</p>
        </div>
        <div class="dialog-ft">
          <span id="quxiao">取消</span>
          <a href="" id="kehuduan" class="download" href="" download="">确定</a>
        </div>
      </div>
</div>
<!-- 弹框结束 -->

<!--音乐播放开始 -->
<div class="yinyuejiemian">
        <div class="datu"><img src="image/datu.jpg" /></div>
<div class="zhezhao"></div>

<div class="tab-head2">
        <a href="javascript:history.go(-1)" id="fanhui"><img src="image/返回.png" /></a>
        <div class="bga"><p id="bg2" class="active">分不清的悲伤</p></div>
    
</div>
<div class="fenmian"><img src="image/fenmian.jpg" id="img"/></div>
<div class="gecixianshi">
        <p class="geci1">满分零分我自己来打分</p>
        <p class="geci2">不要谁给我意见</p>
</div>


<div class="m-main">
  <div class="player">
 
    <div class="play-box">
      <div class="left">
        <p class="timeline"><span></span></p>
        <div class="info">
          <span class="size">00:00</span>
          <span class="timeshow">00:00</span>
        </div>
      </div>
    </div>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-play" style="display:none;">播放</a>
    <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="js-pause" style="display:none;">暂停</a>
  </div>
 <div class="video">
 <video controls autoplay name="media" id="js-video"><source src="#" type="video/mp4"></video>
 </div>
</div>



<div class="qiehuan">
    <div class="pre"><img src="image/pre.png" /></div>
    <div class="bofang" ><img src="image/bofang.png" id="bofang"/></div>
    <div class="nex"><img src="image/next.png" /></div>
</div>
<div class="xiazaidonggan"><div class="lijixiazai">立即下载App</div></div>
</div>
<!-- 音乐播放结束 -->

<script>












var ch;  //窗体可视高度
var sh;  //窗体总高度
var st;  //滚动条位置，从0开始
var p = 1;  //表示第一页
var isloaded = false;  //表示是否加载成功
var music = new Audio(); //表示全局音乐播放器
//歌词API
//http://m.kugou.com/app/i/krc.php?cmd=100&hash=59eec98e433a77ab5a85167dede645ca&timelength=3434

//1.网页加载成功后，给搜索按钮赋事件
window.onload = function(){
  ch = document.documentElement.clientHeight;
  sh = document.documentElement.scrollHeight;
  st = document.documentElement.scrollTop;

  searchbtn.onclick = function(){ 
    loaddata(true);
  };
  (cbtn).onclick = function() {
        //img是按钮图片
        var img = this.src;
        //如果按钮图片是"暂停"，则执行暂停操作
        if (img == this.src) {
            music.pause();
            this.src = "image/3.png";
        }
        if (img == this.src) {
            //如果按钮不是"暂停"，则执行播放操作
            music.play();
            this.src = "image/1.png";     
        }
    };
    (bofang).onclick = function() {
        //img是按钮图片
        var img = this.src;
        //如果按钮图片是"暂停"，则执行暂停操作
        if (img == this.src) {
            music.pause();
            this.src = "image/暂停.png";
        }
        if (img == this.src) {
            //如果按钮不是"暂停"，则执行播放操作
            music.play();
            this.src = "image/bofang.png";     
        }
    };
 
};

//2.当网页滚动时，触发事件
window.onscroll = function(){
  if(isloaded){
    st = document.body.scrollTop||document.documentElement.scrollTop;
    sh = document.body.scrollHeight||document.documentElement.scrollHeight;
    //debug.innerHTML = st+" "+ch+" "+sh; 
    //滚动条到底了
    if(st+ch==sh){
      $("#loading").show();
      p++;
    //为了降低服务器压力，延迟2秒执行请求
      setTimeout(loaddata,2000);
    }
  }
};

//3.加载远程数据函数
//qingkong参数，传递true则表示要清空musiclist层的内容；
//不传或传递false，表示不清空
function loaddata(qingkong){
 //下面的函数是jquery的ajax函数，专门用来发送Ajax请求
 //这个函数有两个重要参数
 //1.是请求地址，该地址是一个跨域地址，在该地址中我们使用
 //callback=getdata来指明获取数据后前端用什么函数来接受服务
 //发送过来的数据
 //2.是dataType:jsonp,这个是指明实现跨域请求
 if(qingkong){
    $("#musiclist").empty();
 }

 var musicurl = "http://mobilecdn.kugou.com/api/v3/search/song?format=jsonp&keyword="+$("#kw").val()+"&page="+p+"&pagesize=20&showtype=1";

 $.ajax({
   url: musicurl,
   dataType: 'jsonp',
   success:function(data){
     getdata(data);
   }
 });

}

//4.这个函数用来处理服务发送过来的数据
function getdata(data){
    console.log(data);
  for (var i = 0; i < data.data.info.length; i++) {
    var m = data.data.info[i];
    //创建一个jquery对象

    var $mdiv = $("<div class=\"music\"></div>");
    //给这个对象设置新的属性hash,可以用它来获取音乐地址
    $mdiv.attr("hash",m.hash);
    //给该元素设置内容
    var $filename = $("<div class=\"filename\"></div>");
    var $download = $("<a class=\"download\" href=\"\" download=\""+m.filename+"\"></a>");
    var $tupian = $("<img class=\"tupian\" src=\"image/2.png\" />");
    var $singername = $("<span class=\"singername\">"+m.singername+"</span>");
    var $songname = $("<span class=\"songname\">"+m.songname+"</span>");
    var $gang = $("<span class=\"gang\"> - </span>");
    $filename.append($singername);
    $filename.append($gang);
    $filename.append($songname);
    $download.append($tupian);
    $mdiv.append($filename);
    $mdiv.append($download);

    getsonginfo($mdiv);
  
    //给该元素附加单击事件
    $mdiv.click(function(){
    //当单击歌曲名称时，发起第二个ajax请求，获取音乐地址
      music.src = $(this).find("a").attr("href");
      $("#foot").show();
      $("#imgs").show();
      $("#mx").attr("src",m.imgUrl);
      $("body").css("margin-bottom","2rem");
      $("#zz").html($(this).find(".singername").html()); 
      $("#gg").html($(this).find(".songname").html()); 
      $("#cbtn").attr("src","image/1.png");
      music.play();
    });
   
    $("#musiclist").append($mdiv);
   }
      
   isloaded = true;
   $("#loading").hide();
}

//5.获得音乐地址并播放
function getsonginfo($musicdiv){
   var songurl = "http://m.kugou.com/app/i/getSongInfo.php?hash="+$musicdiv.attr("hash")+"&cmd=playInfo&format=jsonp";
   var finalurl;

   $.ajax({
        url: songurl ,
        dataType: 'jsonp',
        success:function(data){
          finalurl = getsongurl(data);
          $musicdiv.find("a").attr("href",finalurl);
        }
   });
}

// 播放页js开始
$(function(){
    $("#fanhui").click(function(){
        $(".yinyuejiemian").hide();
        $("#foot").toggle();
    }),

    $(".renxiang").click(function(){
        $(".yinyuejiemian").toggle();
        $("#foot").toggle();
        $("#bg2").html($("#gg").text());
    })
});

  // 播放页js结束

//6.播放音乐
function getsongurl(data){
   return data.url;
}
</script>
    

